<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
        />
        <title>Vue Homepage Demo</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="product in products">
                    <input type="number" v-model.number="product.quantity" />
                    {{ product.name }}
                    <span v-if="product.quantity === 0"> - OUT OF STOCK</span>
                    <button @click="product.quantity += 1">Add</button>
                </li>
            </ul>
            <h2>Total Inventory: {{ totalProducts }}</h2>
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    products: [],
                },
                computed: {
                    totalProducts() {
                        return this.products.reduce((sum, product) => {
                            return sum + product.quantity;
                        }, 0);
                    },
                },
                created() {
                    fetch('/api.json')
                        .then((response) => response.json())
                        .then((json) => {
                            this.products = json.products;
                        });
                },
            });
        </script>
    </body>
</html>
